<style lang="scss" scoped>
    .join_lesson{
        min-height: calc(100vh - 90px);
        background-color: #FAFCFC;
        background-image:url('~@/assets/student-bg.jpg');
        background-repeat: no-repeat;
        background-position-y: bottom;
        background-size: 100%;
        position: relative;
        .go_center{
            position: absolute;
            right: 10px;
            top: 20px;
        }
    }

 
    .step li{
        color: #fff;
        background:$sub-color;
        width:24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        &.success{
            background:$success-color;
        }
        &.error{
            background:$error-color;
        }
        &.skip{
            background:$warning-color;
        }
        &.active::after{
            position: absolute;
            content: "";
            width: 16px;
            height: 16px;
            background: url('~@/assets/current.png') no-repeat;
            background-size: contain;
            bottom: -14px;
            left: 0;right: 0;
            margin: auto;
        }
    }
    .step .tips{
        color: #999;
        font-size: 12px;
        li{
            width: 8px;
            height: 8px;
            margin-right: 3px;
            line-height: 26px;
        }
    }
    .spill-gold{
        position: absolute;
        left: 0;right: 0;
        bottom: 0;top: 0;
        margin: auto;
        widows: 80vh;
        height: 80vh;

    }
</style>
<template>
    <div class="join_lesson py-2 border-radius">
        <Button class="go_center" @click="go_center">返回个人中心</Button>
        <div v-if="!answerStep">
             <div v-if="!~currentIndex">
                <h4 class="block-title">{{content.title}}</h4>
                <div class="mt-1 p-2">
                    <div class="desp w-100b" style="word-break:break-all" v-html="content.content"></div>
                    <div class="mt-2" v-if="content.file_list.length">
                        <span class="mr-1"> 附件列表：</span>
                        <download-list :file_list="content.file_list"/>
                    </div>
                    <div class="mt-4">
                        <Button @click="getAll_problems" type="primary" size="large">开始作答</Button>
                    </div>
                </div>
            </div>
            <div class="problems" v-else>
                <div class="d-flex line-height-26">
                    <h4 class="block-title t1 mr-1">No.{{currentIndex+1+' '+currentProblems.typeName}}题 ({{currentProblems.score}}分)</h4>
                    <span class="color-666 mr-2">课程编号：{{currentProblems.no}}</span>
                    <span class="color-red" v-if="currentProblems.limit_time">限时 {{formateSeconds(limit_time)}}分钟</span>
                </div>
                <div class="t1" v-if="currentProblems.type===1">
                    <div class="details p-1">
                        <p class="my-2">{{currentProblems.title}}</p>
                        <RadioGroup v-model="currentAnswer" >
                            <Radio :disabled="currentProblems.disabled" border label="1">正确</Radio>
                            <Radio :disabled="currentProblems.disabled" border label="2">错误</Radio>
                        </RadioGroup>
                    </div>
                </div>
                <div class="t2" v-if="currentProblems.type===2">
                    <div class="details p-1">
                        <div class="my-2">
                            <span v-for="(val,index) in currentProblems.title" :key="index">
                                {{val}}
                                <Input :disabled="currentProblems.disabled" class="w-100 mx-1" v-model="currentAnswer[index]" v-if="index!==currentProblems.title.length-1"></Input>
                            </span>
                        </div>
                    </div>
        
                </div>
                <div class="t3" v-if="currentProblems.type===3">
                    <div class="details p-1">
                        <p class="my-2">{{currentProblems.title}}</p>
                        <RadioGroup vertical v-if="currentProblems.typeName==='单选'" v-model="currentAnswer">
                            <Radio  :disabled="currentProblems.disabled" :label="val.index" v-for="val in currentProblems.option" :key="val.index">{{val.index+'：'+val.text}}</Radio>
                        </RadioGroup>
                        <CheckboxGroup v-else v-model="currentAnswer" >
                            <Checkbox :disabled="currentProblems.disabled" class="d-block mb-1" :label="val.index" v-for="val in currentProblems.option" :key="val.index">{{val.text}}</Checkbox>
                        </CheckboxGroup>
                    </div>
                </div>
                <div class="t4" v-if="currentProblems.type===4">
                    <div class="details p-1">
                        <p class="my-2">{{currentProblems.title}}</p>
                        <Input type="textarea" style="width:700px" :disabled="currentProblems.disabled" v-model="currentAnswer" :autosize="{minRows: 5}" placeholder="请输入答题内容" />
                    </div>
                </div>
                <div class="my-2 p-1" v-if="currentProblems.file_list.length">
                    <span class="mr-1">附件列表:</span>
                    <download-list :file_list="currentProblems.file_list"/>
                </div>
                <div class="my-2 ml-1">
                    <Button type="primary" @click="currentProblems.disabled?next_problems():submit_answer_func()">{{currentProblems.disabled?'下一题':'提交'}}</Button>
                    <Button class="ml-1" v-if="currentProblems.type===4&&!currentProblems.disabled" @click="handle_skip">跳过</Button>
                </div>
                <div class="step mt-2 p-1">
                    <ul class="d-flex">
                        <li class="mr-2" @click="next_problems(index)" v-for="(val,index) in this.questions_list" :key="index" :class="[{active:index===currentIndex},['skip','error','success',''][val.right+1]]" >{{index+1}}</li>
                    </ul>
                </div>
                <p class="pl-1 line-height-26 font-12 color-999">点击序号跳转至指定题目</p>
                <div class="step px-1">
                    <ul class="d-flex tips">
                        <div class="mr-1">
                            <li class="success"></li>表示正确
                        </div>
                        <div class="mr-1">
                            <li class="error"></li>表示错误
                        </div>
                        <div class="mr-1">
                            <li class="skip"></li>表示跳过
                        </div>
                        <div>
                            <li></li>表示尚未答题
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <lesson-evaluate :lid="content.id" v-if="answerStep==1 || answerStep===2" :step="answerStep" :is_last="content.is_last" @addStep="addStep" @set_gold="set_gold"/>
        <div v-if="answerStep===3" class="end">
            <img src="@/assets/spill-gold.gif" class="spill-gold" v-if="spill_gold_show">
            <h2 class="text-center  line-height-36">本次课程已结束</h2>
            <p class="text-center my-3">本节课有不懂的问题可以点击 <router-link :to="{path:'/s/questions_list',query:{tid:this.content.tid}}">这里</router-link> 向老师提问</p>
            <p class="mt-3 text-center font-16">本次作业得到 <span class="color-t3">{{gold}}枚</span><Icon custom="iconfont icon-coin" size="18" class="color-t3 ml-1"/></p>
            <Button type="primary" size="large" class="mx-auto mt-5 d-block" @click="$router.push({name:'schoolwork_show',query:{lid: $route.query.lid }})">查看答题情况</Button>
        </div>
        <audio ref="mp3" src="https://img.tukuppt.com/newpreview_music/08/98/74/5c88b757dd8dc88512.mp3"></audio>
    </div>
</template>
<script>
    import {deep_clone,isEmptyObject,formateSeconds} from "@/common/tool"
    import {exam_questions,enter_lesson,submit_answer} from "@/common/sapi"
    import lessonEvaluate from "@/components/lessonEvaluate"
    export default {
        data(){
            return {
                is_eva_teacher:false,
                is_eva_self:false,
                formateSeconds,
                limit_timer:null,
                limit_time:0,
                spill_gold_show:true,
                answerStep:0,
                typeNames:["判断",'填空/计算','选择','论述'],
                content:{
                    file_list:[]
                },
                currentIndex:-1,
                currentProblems:{
                    type:1,
                    typeName:''
                },
                currentAnswer:null,
                gold:0
            }
        },
        methods:{
            set_gold(gold){
                this.gold=gold
            },
            addStep(){
                if(this.answerStep<3){
                    this.answerStep++
                }
                if((this.answerStep===1 && this.is_eva_teacher) || (this.answerStep===2 && this.is_eva_self))
                    this.addStep()
                else if(this.answerStep===3){
                    this.$refs.mp3.play()
                    setTimeout(()=>this.spill_gold_show=false,4000)
                }
            },
            submit_answer_func(){
                let content=''
                if(this.currentProblems.type===4)
                    content=this.currentAnswer || ''
                else if(this.currentProblems.type!==3 || !this.currentProblems.origin_answer.includes(','))
                    content=Array.isArray(this.currentAnswer)?this.currentAnswer.join(','):this.currentAnswer
                else
                    content=this.currentAnswer.sort((a,b)=>a.charCodeAt()-b.charCodeAt()).join(',')
                    
                submit_answer({
                    lid:this.content.id,
                    qid:this.currentProblems.id,
                    cid:localStorage.getItem('cid'),
                    content
                })
                .then(res=>{
                    if(res){
                        clearInterval(this.limit_timers)
                        this.$set(this.currentProblems,'disabled',true)
                        this.$set(this.questions_list[this.currentIndex],'disabled',true)
                        this.$set(this.questions_list[this.currentIndex],'right',res.data.right)
                        setTimeout(() => {
                            this.$Modal[['info','error','success'][res.data.right+1]]({
                                title:['已跳过','回答错误','回答正确'][res.data.right+1],
                                content: '点击确定进入下一题',
                                onOk:()=>{
                                    this.next_problems()
                                }
                            });
                        },500);
                    }
                })
            },
            process(val){
                val.typeName=this.typeNames[val.type-1]
                if(val.type===2)
                    val.title=val.title.split('(####)')
                if(val.type===3){
                    val.typeName=val.origin_answer.includes(',')?'多选':'单选'
                }
                clearInterval(this.limit_timer)
                if(val.limit_time){
                    this.limit_time=val.limit_time*60
                    this.limit_timer=setInterval(()=>{
                        this.limit_time--
                        if(this.limit_time<1){
                            clearInterval(this.limit_timer)
                        }
                    },1000)
                }
                this.currentProblems=val
            },
            next_problems(index=-1){
                if(~index && index<this.questions_list.length){
                    this.currentIndex=index
                }
                else if(index===-1){
                    const resIndex=this.questions_list.findIndex(el=>!el.disabled)
                    if(~resIndex)
                        this.currentIndex=resIndex
                    else{
                        this.addStep()
                        return 
                    }
                }
                this.process(deep_clone(this.questions_list[this.currentIndex]))
            },
            getAll_problems(){
                if(this.is_eva_self){
                     this.$Modal.confirm({
                        title: '提示',
                        content: `本次作业已交卷，点击确认查看作业详情`,
                        onOk: () => {
                            this.$router.push({path:'/s/schoolwork_show',query:{lid:this.$route.query.lid}})
                        }
                    });
                    return 
                }
                exam_questions({lid:this.content.id})
                .then(res=>{
                    if(res){
                        this.questions_list=res.data.question.map(el=>{
                            if(!isEmptyObject(el.answer)){
                                el.disabled=true
                                el.right=el.answer.right
                            }else{
                                el.disabled=false
                                el.right=2
                            }
                            return el
                        })
                        this.next_problems()
                    }
                })
            },
            handle_skip(){
                this.$Modal.confirm({
                    title: '确认',
                    content: `跳过功能只限于课堂上已口述答题完毕的，将由老师打分，跳过后将不能再答本题，确认跳过吗？`,
                    onOk: () => {
                        this.currentAnswer=''
                        this.submit_answer_func()
                    }
                });
            },
            go_center(){
                 this.$Modal.confirm({
                    title: '确认',
                    content: `将退出当前作业，返回个人中心？`,
                    onOk: () => {
                        this.$router.push('center')
                    }
                });
            }
          
        },
        watch:{
            currentIndex(){
                const type=this.currentProblems.type
                const isEmpty=isEmptyObject(this.currentProblems.answer)
                if(type===1)
                    this.currentAnswer=isEmpty?'':this.currentProblems.answer.content
                else if(type===2){
                    this.currentAnswer=isEmpty?new Array(this.currentProblems.title.length-1).fill(''):this.currentProblems.answer.content.split(',')
                }
                else if(type===3){
                    if(this.currentProblems.typeName==='单选')
                        this.currentAnswer=isEmpty?'':this.currentProblems.answer.content
                    else
                        this.currentAnswer=isEmpty?[]:this.currentProblems.answer.content.split(',')
                }
                else
                    this.currentAnswer=isEmpty?'':this.currentProblems.answer.content

            }
        },
        components:{
            lessonEvaluate
        },
        beforeDestroy(){
            //发送销毁http服务
            this.$ipcRenderer.removeAllListeners(['active_topic_reply'])
        },
        created(){
            enter_lesson({lid:this.$route.query.lid})
            .then(res=>{
                if(res){
                    this.content=res.data.info
                    this.is_eva_teacher=!isEmptyObject(res.data.eva_teacher)
                    this.is_eva_self=!isEmptyObject(res.data.eva_self)
                }
            })
            this.$ipcRenderer.send('active_topic')
        },
        mounted(){
            this.$ipcRenderer.on('active_topic_reply',(event,data)=>{
                const index=this.questions_list.findIndex(el=>el.no==data)
                if(~index){
                    this.next_problems(index)
                    this.$ipcRenderer.send('focus_main')
                }
            })
        }
    }
</script>